<template>
<el-tabs class="login-box h-full" v-model="active" stretch>
  <el-tab-pane label="账号密码登录" name="1" lazy>
    <el-form ref="loginFormRef" :model="loginForm" status-icon>
      <el-form-item prop="username" :rules="[{required:true,message:'请输入用户名!',trigger:'change'}]">
        <el-input v-model="loginForm.username" clearable placeholder="请输入用户名" prefix-icon="User" @keyup.enter="login" />
      </el-form-item>
      <el-form-item prop="password" :rules="[{required:true,message:'请输入密码!',trigger:'change'}]">
        <el-input v-model="loginForm.password" clearable placeholder="请输入密码" prefix-icon="Lock" show-password @keyup.enter="login" />
      </el-form-item>
      <el-form-item>
        <div class="flex justify-between w-full">
          <el-checkbox v-model="auto" label="自动登录"/>
          <el-link type="primary">忘记密码</el-link>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button class="w-full" type="primary" @click="login">立即登录</el-button>
      </el-form-item>
    </el-form>
  </el-tab-pane>
  <el-tab-pane label="手机号登录" name="2" lazy>
  </el-tab-pane>
</el-tabs>
</template>

<script setup lang="ts">
import {login as lg} from '@/api/primaryBase'
const router = useRouter()
const active = ref('1')

const loginFormRef = ref()
const loginForm = reactive({
  username:'',
  password:''
})
const auto = ref<boolean>(false)
const login = ()=>{
  //
  loginFormRef.value.validate((valid:boolean)=>{
    if (valid){
      lg(loginForm).then(res=>{
        ElMessage({
          type: res.code === 200 ? 'success' : 'error',
          message: res.msg
        })
        if (res.code === 200) {
          sessionStorage.setItem("token", res.token)
          router.push("/")
        }
      })
    }else return false
  })
}
</script>

<style scoped lang="scss">
.login-box {
  min-width: 310px;
}

@media (max-width: 550px) {
  .login-box {
    min-width: auto;
  }
}
</style>